<template>
    <h2>reactive: {{ m1 }}</h2>
    <h2>shallowReactive: {{ m2 }}</h2>
    <h2>ref:{{ m3 }}</h2>
    <h2>shallowRef:{{ m4 }}</h2>
    <button @click="change">更新数据</button>
</template>

<script lang="ts" setup>
import { reactive, shallowReactive, shallowRef, ref } from 'vue';

    const m1 = reactive({
        name:"孙悟空",
        car:{
            name: "猪八戒"
        }
    })

    const m2 = shallowReactive({
        name:"猪八戒",
        car:{
            name:"比亚迪"
        }
    })

    const m3 = ref ({
        name: "糖果",
        car: {
            name: "白龙马"
        }
    })

    const m4 = shallowRef ({
        name: "沙和尚",
        car: {
            name: "脚"
        }
    })

    function change() {
        // reactive ------ 深度响应式
        // m1.name = "刘志强"
        // m1.car.name = "凯迪拉克"
        //shallowRective ---- 浅度响应式
        // m2.name = "小饼"
        // 直接更改深层数据会失效，要先改第一层
        // m2.car.name = "宝马"

        //ref ----- 深度响应式
        // m3.value.car.name = "黑龙马"
        //shallowRef-------改不了
        m4.value.name = "光头强"
        m4.value.car.name = "熊二"

    }
</script>